<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>react状态提升</title>
</head>
<body>
  <div id="app"></div>
  <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
  <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
  <!-- 使用jsx需要babel转义 -->
  <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
  <!-- 使用babel需要申明type -->
  <script type="text/babel">
    // ***我自己的封装***
    // function ReactEl(data) {
    //   let tag = document.querySelector(data.el)
    //   return tag
    // }
    // ReactDOM.render(
    //   <h1>hello，reactyyy</h1>,
    //   new ReactEl({
    //     el: '#app'
    //   })
    // )
    // 山地人的封装
    function createApp({el='#app',comp}) {
      ReactDOM.render(comp,document.querySelector(el))
    }

    function BoilingVerdirt(props) {
      if(props.celsius >= 100) {
        return <p>水开了</p>
      }
      return <p>水还没开</p>

    }

    class Calculator extends React.Component {
      constructor(props) {
        super(props)
        this.state = {
          temperature: ''
        }
        this.handleChange = this.handleChange.bind(this)
      }
      handleChange(e) {
        this.setState({temperature: e.target.value})
      }
      render() {
        const { temperature } = this.state
        return (
          <fieldset>
            <legend>输入温度  </legend>
            <input value={temperature} onChange={this.handleChange} />
            <BoilingVerdirt celsius={parseFloat(temperature)} />
          </fieldset>
        )
      }
    }

    createApp({
      // el:'#root',
      comp: <Calculator />,
    })
  </script>
</body>
</html>